<template>
  <view class="root">
    <view class="bottom-wrapper">
      <view class="content">
        <yy-scroll-view ref="scrllViewRef1" :static-params="staticParams1"
          request-url="/mini/acquisition/storagebatteryAcquisitionRecords/page" :auto-request="false">
          <template slot-scope="{list}">
            <view class="list-item-wrapper" v-for="(item, index) in list" :key="index">
              <view class="list-inner">
                <image :src="imgPrefix + item.saPathList[0]" class="i-cover"
                  @click="handlePreviewImage(item.saPathList)"></image>
                <view class="i-right" @click="handleDetail(item)">
                  <view class="list-item-title">
                    {{`${item.brand}`}} {{ item.voltage ?  `(${item.voltage}V)` : '' }}
                  </view>
                  <view class="list-item">
                    <view class="list-label">
                      卖出人姓名:
                    </view>
                    <view class="list-value">
                      {{item.sellPersonName}}
                    </view>
                  </view>
                  <view class="list-item">
                    <view class="list-label">
                      身份证号:
                    </view>
                    <view class="list-value">
                      {{encryptIDCard(item.sellPersonIdcard) || '暂无'}}
                    </view>
                  </view>
                  <view class="list-item">
                    <view class="list-label">
                      上报时间:
                    </view>
                    <view class="list-value">
                      {{item.createTime || '暂无'}}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </yy-scroll-view>
      </view>
      <view class="bottom">
        <yy-button-add @click="handleAddVehicleMaintenance" text="新增"></yy-button-add>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    navTo,
    previewImage,
    encryptIDCard
  } from '@/utils/util.js'
  import moment from '@/utils/moment.js'


  export default {
    data() {
      return {
        imgPrefix: uni.getStorageSync("imgPrefix"),
        baseImgUrl: this.$baseImgUrl,
        scrllViewRef1: null,
        scrllViewRef2: null,
        searchValueVehicleRecord: '',
        searchValueRakeCar: '',
        staticParams1: {},
        staticParams2: {
          stype: '1'
        },
        inputStyles: {
          background: '#f8f8f8',
          borderRadius: '340rpx 340rpx 340rpx 340rpx',
          border: '1rpx solid #F1F2F3',
        },
        options: {},
        activeIndex: 0,
      }
    },
    onLoad(options) {
      this.options = options
      Object.assign(this.staticParams1, {
        companyId: this.options.companyMessageId
      })
      this.$refs.scrllViewRef1.getList('init', this.staticParams1)

      uni.$on('add-battery-success', () => {
        this.$nextTick(() => {
          this.staticParams1.likeName = ''
          this.$refs.scrllViewRef1.getList('init', this.staticParams1)
        })
      })
    },
    onUnload() {
      uni.$off('add-battery-success')
    },
    methods: {
      moment,
      encryptIDCard,
      inputVehicle() {
        Object.assign(this.staticParams1, {
          likeName: this.searchValueVehicleRecord ? this.searchValueVehicleRecord.trim() : ''
        })
        this.$refs.scrllViewRef1.getList('init', this.staticParams1)
      },
      inputTakeCar() {
        Object.assign(this.staticParams2, {
          likeName: this.searchValueRakeCar ? this.searchValueRakeCar.trim() : ''
        })
        this.$refs.scrllViewRef2.getList('init', this.staticParams2)
      },
      handleDetail(item) {
        navTo({
          url: '/itemRegistration/batteryDetail',
          params: {
            ...item
          }
        })
      },
      handleDetailTakeCar(item) {
        navTo({
          url: '/specialtyBook/maintenanceRecords/takeCar/takeCarDetail',
          params: {
            ...item
          }
        })
      },
      handleAddVehicleMaintenance() {
        navTo({
          url: '/itemRegistration/batteryAdd',
          params: {
            companyMessageId: this.options.companyMessageId
          }
        })
      },
      handleAddTakeCar() {
        navTo({
          url: '/specialtyBook/maintenanceRecords/takeCar/takeCar',
          params: {
            companyMessageId: this.options.companyMessageId
          }
        })
      },
      handlePreviewImage(urls) {
        previewImage.call(this, urls)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #F9F9F9;

    /deep/ .u-tabs {
      background: #fff;
    }

    .bottom-wrapper {
      flex: 1;
      height: 0;
      display: flex;
      flex-direction: column;
    }


    .top {
      padding: 25rpx;
      background: #FFFFFF;

      /deep/ .is-input-border {
        background: #F8F8F8 !important;
        border-radius: 340rpx 340rpx 340rpx 340rpx !important;
        border: 1rpx solid #F1F2F3 !important;
      }
    }

    .content {
      flex: 1;
      padding: 10rpx 15rpx;
      height: 0;
    }

    .list-item-wrapper {
      padding: 35rpx 16rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-bottom: 14rpx;

      .list-inner {
        display: flex;

        .i-cover {
          width: 227rpx;
          height: 210rpx;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          margin-right: 10rpx;
          flex-shrink: 0;
        }
      }

      .list-item-title {
        font-weight: bold;
        font-size: 30rpx;
        color: #181818;
      }

      .list-item {
        display: flex;
        margin-top: 18rpx;

        .list-label {
          font-weight: 500;
          font-size: 28rpx;
          color: #999999;
          margin-right: 5rpx;
          width: 150rpx;
          text-align: right;
        }

        .list-value {
          font-weight: 500;
          font-size: 28rpx;
          color: #101010;
        }
      }
    }

    .bottom {}
  }
</style>